<template>
  <div class="crm-page home-page">
    <div class="page-header">业绩排名</div>
    <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">
        <!-- <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
            <el-select v-model="queryParam.orgType">
              <el-option value="2" label="个人" />
              <el-option value="1" label="部门" disabled />
            </el-select>
          </el-col> -->
        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.searchType" @change="handleChange">
            <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="page-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="个人排行榜" name="1" />
      </el-tabs>
      <!-- <h3>个人排行榜</h3> -->
      <el-row :gutter="10">
        <!-- -->
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <CardList title="成交客户排行榜" path="customer" :date-type="queryParam.searchType" :list="listMap.personal['3']" :header-texts="['排名', '姓名', '个数']" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <CardList title="签约金额排行榜" path="contract" :date-type="queryParam.searchType" :list="listMap.personal['1']" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <CardList title="回款金额排行榜" path="payment" :date-type="queryParam.searchType" :list="listMap.personal['2']" />
        </el-col>
      </el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="客户排行榜" name="1" />
      </el-tabs>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <CardList title="签约金额排行榜" path="contract" type="customer" :date-type="queryParam.searchType" :list="listMap.customer['1']" :header-texts="['排名', '客户名', '金额（元）']" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <CardList title="回款金额排行榜" path="payment" type="customer" :date-type="queryParam.searchType" :list="listMap.customer['2']" :header-texts="['排名', '客户名', '金额（元）']" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { dateTypes } from '@/utils/enums'
import { getSalesRankPerson, getSalesRankCustomer } from '@/api/chart'
const API = {
  personal: getSalesRankPerson,
  customer: getSalesRankCustomer
}
const USER_TYPE_LIST = ['personal', 'customer']
const BUSINESS_TYPE_MAP = {
  personal: ['1', '2', '3'],
  customer: ['1', '2']
}
import CardList from './components/CardList.vue'
export default {
  name: 'SaleTargets',
  components: {
    CardList
  },
  data() {
    return {
      activeName: '1',
      dateTypes,
      queryParam: {
        searchType: 7,
        orgType: '2'
      },
      listMap: {
        personal: {
          1: [], // 个人-签约金额
          2: [], // 个人-回款金额
          3: [] // 个人-新增客户
        },
        customer: {
          1: [], // 客户-签约金额
          2: [] // 客户-回款金额
        }
      }
    }
  },
  mounted() {
    this.getAllListData()
  },
  methods: {
    getAllListData() {
      USER_TYPE_LIST.forEach(userType => {
        BUSINESS_TYPE_MAP[userType].forEach(businessType => {
          this.getListData(userType, businessType)
        })
      })
    },
    async getListData(userType, businessType) {
      try {
        const params = {
          businessType,
          searchType: this.queryParam.searchType,
          currentPage: 1,
          pageSize: 5
        }
        const res = await API[userType](params)
        if (res.records) {
          this.listMap[userType][businessType] = res.records
        }
      } catch (error) {
        console.error(error)
      }
    },
    handleSearch() {
      this.getAllListData()
    },
    handleChange() {
      this.handleSearch()
    }
  }
}
</script>
